import React, { useEffect, useRef } from 'react'
import { Form, Row, Col, Input, Space, Button, Select } from 'antd'
import style from './Index.module.less'
const { Item } = Form
const { Option } = Select
const layout = {
  labelCol: { flex: '140px' }
}

function formatCondition (form) {
  const condition = []
  if (form.name !== undefined && form.name !== '') {
    condition.push({ k: 'name', o: 'like', v: `%${form.name}%` })
  }
  if (form.type && form.type !== '全部') {
    condition.push({ k: 'type', o: '=', v: form.type })
  }
  return condition
}

function Main ({ meta, onChange = () => {} }) {
  const formRef = useRef(null)
  useEffect(() => {
    if (meta && meta.formData && formRef.current) {
      formRef.current.setFieldsValue(meta.formData)
      formRef.current.submit()
    }
  }, [meta, formRef])
  return (
    <div>
      <Form name='arbitrator-manage-search' ref={formRef} {...layout} initialValues={{ type: '全部' }} onFinish={d => onChange(formatCondition(d))} onReset={() => formRef.current.submit()}>
        <Row gutter={24}>
          <Col span={8}>
            <Item label='姓名' name='name'>
              <Input placeholder='请输入' />
            </Item>
          </Col>
          <Col span={8}>
            <Item label='类型' name='type'>
              <Select placeholder='请选择'>
                <Option value='全部'>全部</Option>
                <Option value='仲裁秘书'>仲裁秘书</Option>
                <Option value='案件审理人员'>案件审理人员</Option>
                <Option value='仲裁管理人员'>仲裁管理人员</Option>
              </Select>
            </Item>
          </Col>
          <Col span={8}>
            <Item className={style['right-line']}>
              <Space size='middle'>
                <Button type='primary' ghost htmlType='submit'>搜索</Button>
                <Button htmlType='reset'>重置</Button>
              </Space>
            </Item>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

export default Main
